<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板复用</title>
</head>
<body>

<!--插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容-->
<div id="app">
  <todo-list v-bind:todos="todos">
    <template v-slot:todo="{ todo }">
      <span v-if="todo.isComplete">✓</span>
      {{ todo.text }}
    </template>
  </todo-list>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('todo-list', {
    template: `
      <ul>
        <li
        v-for="todo in filteredTodos"
        v-bind:key="todo.id"
        >
          <slot name="todo" v-bind:todo="todo">
            {{todo.text}}
          </slot>
        </li>
      </ul>
    `,
    data: function () {
      return {
        filteredTodos: [
          {
            id: 1,
            text: '完成作业',
            isComplete: true
          },
          {
            id: 2,
            text: '修理灯泡',
            isComplete: false
          }
        ]
      }
    }
  })

  let vm = new Vue({
    el: '#app',
    data: {
      todos: []
    }
  })
</script>

</body>
</html>